<template>
  <div class="sys-cell">
    <!-- <el-button type="primary" @click="ceshi">主要按钮</el-button> -->
    <!-- 头部选择栏 -->
    <div class="cell-header">
      <!-- 合并等控制选项 -->
      <div style="width: calc(100% - 200px); height: 100%; display: flex">
        <!--top-menu-hover添加鼠标悬浮样式-->
        <div class="cell-btn top-menu-hover toolbtn" @click="merge">
          <el-tooltip class="item" effect="dark" content="合并" placement="top">
            <span class="iconfont iconhuitu-hebingdanyuange"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="split">
          <el-tooltip class="item" effect="dark" content="拆分" placement="top">
            <span class="iconfont iconhuitu-chaifendanyuange"></span>
          </el-tooltip>
        </div>
        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addrow">
          <el-tooltip class="item" effect="dark" content="增加行" placement="top">
            <span class="iconfont iconhuitu-xinzenghang"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="delrow">
          <el-tooltip class="item" effect="dark" content="删除行" placement="top">
            <span class="iconfont iconhuitu-shanchuhang"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="insertrow">
          <el-tooltip class="item" effect="dark" content="插入行" placement="top">
            <span class="iconfont iconhuitu-charuhang"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addcol">
          <el-tooltip class="item" effect="dark" content="增加列" placement="top">
            <span class="iconfont iconhuitu-xinzenglie"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="delcol">
          <el-tooltip class="item" effect="dark" content="删除列" placement="top">
            <span class="iconfont iconhuitu-shanchulie"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="insertcol">
          <el-tooltip class="item" effect="dark" content="插入列" placement="top">
            <span class="iconfont iconhuitu-charulie"></span>
          </el-tooltip>
        </div>
        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="delline">
          <el-tooltip class="item" effect="dark" content="删线" placement="top">
            <i class="el-icon-circle-close"></i>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addLeftLine">
          <el-tooltip class="item" effect="dark" content="加左边线" placement="top">
            <span class="iconfont iconhuitu-zuokuangxian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addTopLine">
          <el-tooltip class="item" effect="dark" content="加顶部线" placement="top">
            <span class="iconfont iconhuitu-shangkuangxian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addRightLine">
          <el-tooltip class="item" effect="dark" content="加右边线" placement="top">
            <span class="iconfont iconhuitu-youkuangxian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addBottomLine">
          <el-tooltip class="item" effect="dark" content="加底部线" placement="top">
            <span class="iconfont iconhuitu-xiakuangxian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="addtextLine">
          <el-tooltip class="item" effect="dark" content="伪下划线" placement="top">
            <span class="iconfont iconbiaoge-bianji"></span>
          </el-tooltip>
        </div>
        <!--<div class="cell-btn top-menu-hover" @click="previewCell">
          <el-tooltip class="item" effect="dark" content="预览" placement="top">
            <span class="iconfont iconyulan"></span>
          </el-tooltip>
        </div>	-->
        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="copyStyle">
          <el-tooltip class="item" effect="dark" content="复制当前单元格样式，双击单元格就能设置成当前复制的样式" placement="top">
            <i class="el-icon-magic-stick"></i>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="setlabel('big')">
          <el-tooltip class="item" effect="dark" content="设置大标签" placement="top">
            <span class="iconfont iconbiaodan-dabiaoqian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="setlabel('normal')">
          <el-tooltip class="item" effect="dark" content="设置小标签" placement="top">
            <span class="iconfont iconbiaodan-xiaobiaoqian"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="setlabel('input')">
          <el-tooltip class="item" effect="dark" content="普通单元格" placement="top">
            <i class="el-icon-s-grid"></i>
          </el-tooltip>
        </div>

        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="showWindCellAttr">
          <el-tooltip class="item" effect="dark" content="弹出表单属性窗口" placement="top">
            <span class="iconfont iconyonghu-jichushezhi"></span>
          </el-tooltip>
        </div>
        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="reportsave">
          <el-tooltip class="item" effect="dark" content="保存表单" placement="top">
            <span class="iconfont iconbiaoge-baocun"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="clone">
          <el-tooltip class="item" effect="dark" content="克隆" placement="top">
            <span class="iconfont iconliucheng-kelong1"></span>
          </el-tooltip>
        </div>
        <div class="divsplit"></div>
        <div class="cell-btn top-menu-hover toolbtn" @click="copyCell">
          <el-tooltip class="item" effect="dark" content="复制" placement="top">
            <span class="iconfont iconhuitu-fuzhi"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="pasteCell">
          <el-tooltip class="item" effect="dark" content="粘贴" placement="top">
            <span class="iconfont iconhuitu-niantie"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="fieldCheck">
          <el-tooltip class="item" effect="dark" content="字段重复检查" placement="top">
            <span class="icon iconfont iconbiaodan-shuxing"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="fieldSearch">
          <el-tooltip class="item" effect="dark" content="字段查找" placement="top">
            <span class="icon iconfont iconbiaoge-sousuochakan"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="heightInit">
          <el-tooltip class="item" effect="dark" content="高度初始化" placement="top">
            <span class="icon iconfont iconhuitu-kaozuo"></span>
          </el-tooltip>
        </div>
        <div class="cell-btn top-menu-hover toolbtn" @click="widthInit">
          <el-tooltip class="item" effect="dark" content="宽度初始化" placement="top">
            <span class="icon iconfont iconhuitu-kaoyou"></span>
          </el-tooltip>
        </div>
        <div class="coordinates" v-if="coordinate">
          {{ '坐标：' + this.coordinate }}
        </div>

        <!--<div class="cell-btn top-menu-hover" @click="getRecord">
          <el-tooltip class="item" effect="dark" content="浏览记录" placement="top">
            <span class="iconfont iconhuitu-yulan"></span>
          </el-tooltip>
        </div>				-->
      </div>
      <!-- 版本选择和删除 -->
      <div style="width: 200px; height: 100%; display: flex" class="flow-version">
        <span>版本选择:</span>
        <el-select class="systemInput" v-model="version" style="width: 100px; height: 24px" @change="checkDataChange">
          <el-option v-for="item in versions" :key="item.id" :label="item.version" :value="item.id"
            style="width: 100px"></el-option>
        </el-select>
        <div class="cell-btn top-menu-hover toolbtn" @click="delCell" style="width: 20px; margin-left: 10px">
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <span class="iconfont iconbiaoge-shanchu" style="color: inherit"></span>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!--表单设计部分-->
    <div class="cellcenter">
      <!-- 表格表单显示区 -->
      <div class="cellcontent" @contextmenu.prevent>
        <div class="celltable" :style="'width:' + tablewidth + 'px;height:' + tableheight + 'px;'" unselectable="on">
          <!-- 表格 -->
          <table class="designtable" ref="reftable">
            <tr v-for="(tr, i) in tableset.trs" :key="i">
              <template v-for="(td, j) in tr.tds">
                <template v-if="td.tdwidth > 0 && td.tdheight > 0">
                  <td v-if="td.rowspan > 0 && td.colspan > 0" :key="j" :style="'width:' +
                    td.tdwidth +
                    'px;height:' +
                    td.tdheight +
                    'px;border-left-style:' +
                    td.bleft +
                    ';border-top-style:' +
                    td.btop +
                    ';border-right-style:' +
                    td.bright +
                    ';border-bottom-style:' +
                    td.bbottom +
                    ';background:' +
                    td.com.comstyles['background'] +
                    ';border-left-width:' +
                    td.com.comstyles.borderleft +
                    'px;border-top-width:' +
                    td.com.comstyles.bordertop +
                    'px;border-right-width:' +
                    td.com.comstyles.borderright +
                    'px;border-bottom-width:' +
                    td.com.comstyles.borderbottom +
                    'px;border-left-color:' +
                    td.com.comstyles.colorleft +
                    ';border-top-color:' +
                    td.com.comstyles.colortop +
                    ';border-right-color:' +
                    td.com.comstyles.colorright +
                    ';border-bottom-color:' +
                    td.com.comstyles.colorbottom +
                    ';'
                    " :rowspan="td.rowspan" :colspan="td.colspan" class="tdcell" @dblclick="setStyle($event, td, i, j)"
                    @mouseup="tdcellsselectedend($event, td, i, j)"
                    @mousedown="tdcellsselected($event, td, i, j, tableset.trs)"
                    @mousemove="tdmousemove($event, td, i, j)">
                    <!--<comrender v-if="td.com" :com="td.com" ref="tdcom"></comrender>-->
                    <!-- 二维码 -->
                    <qrcode v-if="td.com.comattrs.showType == '8'" :text="'空空如也'">
                    </qrcode>
                    <!-- 每个单元格内都显示内容 -->
                    <div v-else :style="'box-sizing:border-box;width:' +
                      td.com.comstyles.width +
                      'px;height:' +
                      td.com.comstyles.height +
                      'px;line-height:' +
                      td.com.comstyles.height +
                      'px;font-size:' +
                      td.com.comstyles['font-size'] +
                      'px;font-weight:' +
                      td.com.comstyles['font-weight'] +
                      ';color:' +
                      td.com.comstyles['color'] +
                      ';text-align:' +
                      td.com.comstyles['text-align'] +
                      ';font-family:' +
                      td.com.comstyles['font-family'] +
                      ';background:' +
                      (td.com.comattrs.tableIdx == null ? (td.com.comattrs.fieldName == null && td.com.comattrs.showDetail == null ? '#afdcd7' : td.com.comstyles['background']) : td.com.comstyles['background'])
                      +
                      ';border-bottom:' +
                      td.com.comstyles.textline +
                      ';'
                      ">
                      <!-- 表单中不可修改的lable内容 -->
                      <span v-if="td.com.comattrs.showType == '1'" :style="'margin-left:' +
                        td.com.comstyles.offsetL +
                        'px;margin-right:' +
                        td.com.comstyles.offsetR +
                        'px;'
                        ">{{ td.com.comattrs.showDetail }}</span>
                    </div>
                  </td>
                </template>
                <td v-else :key="j" :style="'width:' +
                  td.tdwidth +
                  'px;height:' +
                  td.tdheight +
                  'px;border:none;'
                  "></td>
              </template>
            </tr>
          </table>
          <!-- 这俩货有啥用？？？？ -->
          <div class="rowline" v-show="cursor == 'row'" :style="'width:' + rowwidth + 'px;'" v-winynmove="directVal"
            ref="rowline" :class="{ rowresize: cursor == 'row' }"></div>
          <div class="colline" v-show="cursor == 'col'" :style="'height:' + colheight + 'px;'" v-winxnmove="directVal"
            ref="colline" :class="{ colresize: cursor == 'col' }"></div>
        </div>
      </div>
      <!--单元格属性设置-->
      <div class="cellatrrs">
        <div class="cell-attr">
          <el-tabs>
            <el-tab-pane label="属性">
              <div>
                <template v-for="(comattr, index) in comf.comattrs">
                  <div class="row" v-if="comattr.rendtype != 'switch'" :key="index">
                    <div class="row-name">{{ comattr.label }}&nbsp;:</div>
                    <el-input class="systemInput" v-if="comattr.rendtype == 'input'"
                      v-model="tdcom.comattrs[comattr.attrkey]" clearable></el-input>

                    <!-- tdcom.comattrs.name -->
                    <el-autocomplete class="systemInput" v-if="comattr.rendtype == 'inline-input'"
                      v-model="tdcom.comattrs[comattr.attrkey]" clearable :fetch-suggestions="querySearchName"
                      @select="autocompleteaSelect(comattr.attrkey)"></el-autocomplete>

                    <template v-if="comattr.rendtype == 'select'">
                      <!--虚拟字段允许自己编辑字段，否则调用下拉框-->
                      <template v-if="comattr.attrkey == 'fieldName'">
                        <el-select class="systemInput" v-if="!tdcom.comattrs.virtual"
                          v-model="tdcom.comattrs[comattr.attrkey]" :multiple="comattr.multiple" filterable collapse-tags
                          clearable @change="selectChange($event, comattr.attrkey)">
                          <el-option v-for="item in comattr.optionitem" :key="item.value" :label="item.label"
                            :value="item.value" @click.native="copyTect1(item.value)">
                          </el-option>
                        </el-select>
                        <el-input class="systemInput" v-if="tdcom.comattrs.virtual"
                          v-model.trim="tdcom.comattrs[comattr.attrkey]" clearable></el-input>
                      </template>
                      <el-input class="systemInput" v-else-if="comattr.label === '可用节点'" @click.native="inputClick"
                        v-model="wfNames"></el-input>
                      <el-select class="systemInput" v-else v-model="tdcom.comattrs[comattr.attrkey]"
                        :multiple="comattr.multiple" collapse-tags clearable
                        @change="selectChange($event, comattr.attrkey)">
                        <el-option v-for="item in comattr.optionitem" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </div>
                </template>
                <div class="switch">
                  <template v-for="(comattr, index) in comf.comattrs">
                    <div class="switchbox" v-if="comattr.rendtype == 'switch'" :key="index">
                      <div class="row-name">{{ comattr.label }}&nbsp;:</div>
                      <el-switch class="systemSwitch" v-if="comattr.rendtype == 'switch'"
                        v-model="tdcom.comattrs[comattr.attrkey]"></el-switch>
                    </div>
                  </template>
                </div>
                <!-- <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入执行脚本"
                  v-model="autoScript"
                  @click.native="dialogVisible = true">
                </el-input> -->
              </div>
            </el-tab-pane>
            <el-tab-pane label="事件">
              <div class="row" v-for="(comevent, index) in comf.comevents" :key="index">
                <div class="row-name">{{ comevent.label }}&nbsp;:</div>
                <el-input class="systemInput" v-if="comevent.rendtype == 'input'"
                  v-model="tdcom.comevents[comevent.attrkey]" clearable></el-input>
                <!-- 自定义input框 -->
                <el-autocomplete class="systemInput" v-if="comevent.rendtype == 'inline-input'"
                  v-model="tdcom.comevents[comevent.attrkey]" clearable
                  :fetch-suggestions="querySearch"></el-autocomplete>

                <el-select class="systemInput" v-if="comevent.rendtype == 'select'"
                  v-model="tdcom.comevents[comevent.attrkey]" :multiple="comevent.multiple" collapse-tags clearable
                  @blur="selectBlur" @focus="selectFocus(comevent.attrkey)">
                  <el-option v-for="item in comevent.optionitem" :key="item.value" :label="comevent.attrkey == 'autoEvent' ? item.value : item.label
                    " :value="item.value">
                  </el-option>
                </el-select>
                <el-switch v-if="comevent.rendtype == 'switch'" v-model="tdcom.comevents[comevent.attrkey]"></el-switch>
                <!-- 弹框Input -->
                <el-tooltip class="item" effect="dark" content="请双击输入框" placement="top">
                  <el-input class="systemInput" v-if="comevent.rendtype == 'selectinput'"
                    v-model="tdcom.comevents.dblcomText" @dblclick.native="setDblEvent" clearable readonly></el-input>
                </el-tooltip>
              </div>
              <div class="switch" style="margin-top:15px" v-show="flge = false">
                <!-- <div class="row-name">{{ '是否多条' }}&nbsp;:</div> -->
                <!-- <el-switch
                  class="systemSwitch"
                  active-value=1
                  inactive-value=0
                  v-model="tdcom.comevents.selectType">
                </el-switch> -->
                <el-input v-model="tdcom.comevents.selectType1" placeholder="请输入内容"></el-input>
              </div>
            </el-tab-pane>
            <el-tab-pane label="其它">
              <div class="row" v-for="(comstyle, index) in comf.comstyles" :key="index">
                <div class="row-name">{{ comstyle.label }}&nbsp;:</div>
                <template v-if="comstyle.rendtype == 'input'">
                  <el-input v-if="comstyle.attrkey == 'width' ||
                    comstyle.attrkey == 'height'
                    " class="systemInput" v-model="ctd['td' + comstyle.attrkey]"
                    @change="settdsize($event, comstyle.attrkey)"></el-input>
                  <!-- 渲染偏移、线宽 -->
                  <el-input v-else class="systemInput" v-model="tdcom.comstyles[comstyle.attrkey]" clearable></el-input>
                </template>

                <el-select class="systemInput" v-if="comstyle.rendtype == 'select'"
                  v-model="tdcom.comstyles[comstyle.attrkey]" :multiple="comstyle.multiple" collapse-tags>
                  <el-option v-for="item in comstyle.optionitem" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-switch v-if="comstyle.rendtype == 'switch'" v-model="tdcom.comstyles[comstyle.attrkey]"
                  style="margin-top: 6px" :disabled="tdcom.comattrs.tableIdx == 0"></el-switch>
                <el-slider v-if="comstyle.rendtype == 'slider'" v-model="tdcom.comstyles[comstyle.attrkey]"
                  class="slider"></el-slider>
                <el-color-picker v-if="comstyle.rendtype == 'colorpicker'"
                  v-model="tdcom.comstyles[comstyle.attrkey]"></el-color-picker>
              </div>
            </el-tab-pane>

          </el-tabs>

        </div>
      </div>
      <!--表单预览-->
      <cellView v-if="showCell" :funcName="'超级飞侠'" :tnodeCode="nodeCode" :tdeptId="deptId" :cellClassId="cellid"
        :wpId="wpId" :tworkId="tworkId" @close="closeCell" :opratetype="opratetype"></cellView>
      <!-- 表单属性弹框 -->
      <winCellAttr v-if="showCellAttr && showCellAttr2" @close="closeCellAttr" @ok="saveCellAttr" :microId='microId'
        @changeMicroId='changeMicroId'></winCellAttr>
      <!-- 组件选择弹框 -->
      <winComSelect v-if="showWinCom" style="z-index:9999" :pcomevents="tdcom.comevents" @close="closeWinCom"
        @ok="saveWinCom"></winComSelect>
      <!--字段重复检测-->
      <div class="maskCenter" v-if="repeatFieldWarning">
        <div class="systemDialog" style="width: 473px; height: 400px">
          <div class="dialog-header" v-winmove>
            <span>警告</span>
          </div>
          <div class="dialog-body" style="text-align: left; font-size: 16px">
            <div>检测到以下单元格字段名重复</div>
            <div v-for="(item, index) in repeatFieldMap" :key="index" style="margin-top: 12px">
              <span>字段名：{{ item.repeatFieldName }}</span> <br />
              <span>第 {{ item.repeatFieldRow2 }} 行，第
                {{ item.repeatFieldColumn2 }} 列</span><br />
              <span>第 {{ item.repeatFieldRow1 }} 行，第
                {{ item.repeatFieldColumn1 }} 列</span>
            </div>
          </div>
          <div class="dialog-footer right">
            <span class="systemButtonConfirm" @click="repeatFieldWarning = false">确定</span>
          </div>
        </div>
      </div>
    </div>
    <!--字段搜索-->
    <div class="maskCenter" v-if="searchFieldDialogVisible">
      <div class="systemDialog" style="width: 473px; height: 400px">
        <div class="dialog-header" v-winmove>
          <span>字段搜索</span>
        </div>
        <div class="dialog-body" style="text-align: left; font-size: 16px">
          <el-input class="systemInput" v-model="searchFieldName"
            style="margin-right: 16px; margin-bottom: 16px; width: 340px"></el-input>
          <span class="businessButtonConfirm" @click="search">查找</span>
          <div>查找结果：</div>
          <div v-for="(item, index) in fieldPositionMap" :key="index" style="margin-top: 12px">
            <span>第 {{ item.X }} 行，第 {{ item.Y }} 列</span><br />
          </div>
          <span>{{ searchResult }}</span>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="searchFieldDialogVisible = false">确定</span>
        </div>
      </div>
    </div>
    <!--可用节点-->
    <div v-if="wfDialogVisible" class="wfDialog" :style="wfPositionStyle">
      <el-radio-group v-model="wfType" @change="wfTypeChange">
        <el-radio :label="3">部分</el-radio>
        <el-radio :label="6">全部</el-radio>
        <el-radio :label="9">禁用</el-radio>
        <el-radio :label="12">忽略</el-radio>
      </el-radio-group>
      <div class="wfMapStyle" v-for="item in wfMap" :key="item.id" :value="item.id">
        <span class="wfName">{{ item.name }}</span>
        <el-checkbox class="wfCheckbox" style="font-size: 22px" :disabled="wfChoosable"
          v-model="wfCheckboxMap[check.code]" v-for="check in wfNodeMap[item.id]" :key="check.code" :label="check.code"
          @change="wfNodeChange()">{{ check.name }}
        </el-checkbox>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="80%" :close-on-click-modal=false v-dialogDrag>
      <div class="codeHeaderBtn">
        <el-link type="primary" @click="showWinCom = true">选择组件</el-link>
        <el-input v-model="autoEventIpt" style="width:200px;"></el-input>
        <el-button type="primary" plain @click="codeFormatte" style="margin-left: 20px;">格式化</el-button>
      </div>
      <!-- <codemirror
        style="text-align:left"
        ref="mycode"
        v-model="autoEvents"
        :options="cmOptions"
        class="code"
      >
      </codemirror> -->
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <div style="height:450px">
              <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:100%;width:100%;text-align:left">
              </codeMirrorIDE>
            </div>
          </el-col>
          <el-col :span="6">
            <div style="border-left-width:1px;border-left-style:solid;border-left-color:black;padding-left:5px">
              <funTree @write="writeScp" />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <codeMirrorIDE ref="codeMirrorIDERef" style="overflow-y: auto;height:300px;text-align:left"></codeMirrorIDE> -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="aotuScript">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import comrender from "./comrender.vue";
import winynmove from "../directives/winYmove";
import winxnmove from "../directives/winXmove";
import qrcode from "@/system/components/qrcode.vue";
import { isEqual, deepCopy } from "@/utils/public";
import {
  com,
  comconfig,
  labelStyles,
  losttableset,
} from "../config/cellConfigs";
import {
  getRep,
  reportquery,
  reportsave,
  reportdetail,
  reportdelete,
  listColumns,
  repClassdetail,
} from "@/system/api/cellEdit";
import { workflownode } from "@/system/api/flowManage";
import cellView from "../pages/cellView.vue";
import winCellAttr from "@/system/components/winCellAttr.vue";
import winComSelect from "@/system/components/winComSelect.vue";
import winmove from "@/directives/winmove";
//TODO   编辑器引入
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/theme/rubyblue.css"; // 引入主题,配置后生效
import "codemirror/theme/mdn-like.css"; // 引入主题,配置后生效
//require("codemirror/mode/javascript/javascript.js"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/selection/active-line"; //光标行背景高亮，配置里面也需要styleActiveLine设置为true
import "codemirror/keymap/sublime"; //sublime编辑器效果
import "codemirror/mode/css/css";
import "codemirror/theme/monokai.css"; //编辑器主题样式，配置里面theme需要设置monokai
//下面这几个引入的主要是验证提示类的,配置里的lint需要设置true,gutters: ['CodeMirror-lint-markers']
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/json-lint";
import "codemirror/addon/display/autorefresh"; //及时自动更新，配置里面也需要设置autoRefresh为true
import codeMirrorIDE from '@/system/components/codeMirrorIDE'
import funTree from '@/system/pages/customPage/funTree.vue'

export default {
  name: "sysCell",
  props: {
    cellid: {
      //类id   classId
      default: null,
    },
  },
  provide() {
    return {
      sCell: this,
    };
  },
  components: {
    comrender,
    cellView,
    winCellAttr,
    qrcode,
    winComSelect,
    codeMirrorIDE,
    funTree
  },
  directives: {
    winynmove,
    winxnmove,
    winmove,
  },
  watch: {
    // 监听左边选项变化
    cellid(v) {
      // if(v){
      //   var that = this
      //   var timer = null
      //   if(timer){
      //     clearTimeout(timer)
      //     tiemr = null
      //   }
      //   timer = setTimeout(() => {
      //     console.log(123);
      //   }, 500);
      // }
      this.getRep(v);
      this.getVersion();
    },
    fieldPositionMap: {
      handler(newName, oldName) {
        if (newName.length > 0) {
          // console.log('执行字段变色',this.$refs.reftable.children);
          // newName.forEach(item => {
          //   this.$refs.reftable.children[item.X-1].childNodes[item.Y-1].style.backgroundColor = 'yellow'
          // })
          this.fieldNewName = []
          for (let i = 0; i < newName.length; i++) {
            this.fieldNewName.push(newName[i])
          }
          this.clearBackColor(this.tableset.trs, this.fieldNewName)

        } else {
          console.log('空空空了');
        }
      }
    },
    tableset: function (val) {
      console.log('表单变化了........')
      this.lastTabName = undefined;
    }
  },
  data() {
    return {
      fieldNewName: [],
      coordinate: '',
      microId: null,
      searchResult: null,
      searchFieldDialogVisible: false,
      wfNames: null,
      wfCheckboxMap: {},
      wfPositionStyle: null,
      wfChoosable: false,
      wfType: 3,
      wfDialogVisible: false,
      wfNodeMap: {},
      wfMap: [],
      currentComeventAttrkey: null,
      repeatFieldMap: [],
      fieldPositionMap: [],
      searchFieldName: null,
      repeatFieldWarning: false,
      tableset: {
        default: null,
      },
      inittd: {
        rowspan: 1,
        colspan: 1,
        tdwidth: 121,
        tdheight: 32,
        bleft: "solid",
        btop: "solid",
        bright: "solid",
        bbottom: "solid",
        com: null,
      },
      inittrs: 6,
      inittds: 6,
      tablewidth: 0,
      tableheight: 0,
      rowwidth: document.body.clientWidth - 650,
      colheight: document.body.clientHeight - 296,
      cursor: "",
      rowlineclicked: false,
      directVal: {
        row: 0,
        col: 0,
        param: 0,
        self: null,
        func: null,
      },
      cellfocused: null,
      mouseDown: false,
      movePosition: {
        starttrindex: -1,
        starttdindex: -1,
        endtrindex: -1,
        endtdindex: -1,
      },
      showspan: true,
      tdcom: null, //当前选中的td的com
      ctd: {
        tdwidth: null,
        tdheight: null,
      },
      comf: null,
      copycom: null,
      tcellinfo: {
        id: null,
        name: null, //表单名称
        code: null, //编码,
        ord: null,
        note: null, //描述
        state: null, //是否可用
        classId: null, //表单类id
        version: 1, //版本
        content: null, //表单结构代码,
        mobileContent: null, //表单结构代码,
        table: [],
        field: [],
        wf: [],
        var: [],
        hField: [],
        initJs: null,
        qrCode: null,
        notice: null,
      },
      cellinfo: {},
      cellStr: null,
      table: {
        id: null,
        tableName: null, //表名
        code: null, //编码,
        repId: null, //表单id
        ord: null, //序号
        rowNum: null, //预定义行数
        param: null, //运行参数
        pkey: null, //主键字段名
        fkey: null, //外键字段名
        okey: null, //排序字段名
        paging: false, //分页显示
        pageSize: 10, //每页记录数
        addrow: false,
      },
      field: {
        id: null, //id ,//
        name: null, //中文名称 ,//
        code: null, //编码 ,//
        repId: null, //表单id ,//
        rowPos: null, //行坐标 ,//
        colPos: null, //行坐标 ,//
        tableIdx: null, //数据表索引 ,//
        fieldName: null, //字段名 ,//
        wfNode: null, //可用节点编号 ,//
        wfNodeName: null, //可用节点名称 ,//
        maxVal: null, //最大值 ,//
        minVal: null, //最小值 ,//
        showType: null, //显示属性，0：文本框，1：下拉列表框，2：下拉树框 ,//
        showDetail: null, //显示内容 ,//
        showFormat: null, //显示格式 ,//
        multiSelect: null, //多项选择 ,//
        emptyText: null, //空白显示 ,//
        readonly: null, //只读 ,//
        notNull: null, //必填 ,//
        rowExpand: null, //行高自动扩展 ,//
        virtual: null, //虚拟字段 ,//
        autoEvent: null, //自动触发事件 ,//
        leftEvent: null, //左键事件 ,//
        rightEvent: null, //右键事件 ,//
        doubleEvent: null, //双击事件 ,//
        finishEvent: null, //完成事件 ,//
        fieldType: null, //字段类型，0：字符，1：整数，2：浮点，3：日期
      },
      wf: {
        id: null, //id ,//
        name: null, //流程类名 ,//
        code: null, //编码 ,//
        repId: null, //表单id ,//
        wfClass: null, //流程类id
      },
      temvar: {
        id: null, //id ,//
        name: null, //变量名称 ,//
        code: null, //编码 ,//
        repId: null, //表单id ,//
        value: null, //缺省值
      },
      thField: {
        tableIdx: -1,
        fieldName: null,
        fieldType: null,
        isHide: 1,
        wfNode: "999999",
      },
      showCell: false,
      showCellAttr: false,
      showCellAttr2: false,
      showWinCom: false, // 控制组件选择页面弹框

      tworkId: 0, //测试 表单的变量  要删除的
      opratetype: "new", //测试 表单的变量 要删除的
      wpId: null, //测试 表单的变量 要删除的
      version: null,
      versions: [],
      nodeOptionClass: null,
      nodeCode: null,
      deptId: 1,
      cleartalbe: [],
      clearflow: false,
      copytableset: null,
      autocompleteHash: {},
      wfNodeMapHash: {},
      getFieldNames: null,
      autoScript: '',
      autoEvents: '',
      autoEventIpt: '',
      JSobj: null,
      dialogVisible: false,
      cmOptions: {
        value: "",
        mode: "text/javascript",
        theme: "mdn-like", //ambiance 黑色  darcula白色  rubyblue
        readOnly: false, //是否只读
        lineNumbers: true, //是否显示行数
        lineWrapping: false,
        extraKeys: { Ctrl: "autocomplete" }, //按键配置
        lineWiseCopyCut: true,
        showCursorWhenSelecting: true,
        matchBrackets: true, //括号匹配
        line: true,
        styleActiveLine: true, // 高亮选中行
        hintOptions: {
          completeSingle: true, // 当匹配只有一项的时候是否自动补全
        },
      },
    };
  },
  computed: {
    //待完成   下拉框级联    根据流程code  设置表单不可用
  },
  methods: {
    getWfMap(map) {
      this.wfMap = map;
      this.wfMap.forEach((wf) => {
        workflownode({ classId: wf.wfClass }).then((res) => {
          if (res.success) {
            this.wfNodeMap[wf.id] = res.info;
            console.log('流程节点信息', res.info);
            res.info &&
              res.info.map((item) => {
                this.wfNodeMapHash[item.code] = item.name;
              });
          }
        });
      });
    },
    autocompleteaSelect(name) {
      console.log(name);
      if (name == "name") {
        this.tdcom.comattrs["fieldName"] = this.comf.comattrs
          .find((a) => a.attrkey == "fieldName")
          .optionitem.find((b) => b.note == this.tdcom.comattrs[name]).value;
      }
      console.log(this.tdcom.comattrs["fieldName"]);
    },
    querySearchName(queryString, cb) {
      let autocomplete = this.autocompleteHash["name"];
      let results = queryString
        ? autocomplete.filter(this.createFilter(queryString))
        : autocomplete;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    querySearch(queryString, cb) {
      let autocomplete = this.autocompleteHash["autoEvent"];
      let results = queryString
        ? autocomplete.filter(this.createFilter(queryString))
        : autocomplete;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    heightInit() {
      for (let row = 0; row < this.tableset.trs.length; row++) {
        for (let col = 0; col < this.tableset.trs[row].tds.length; col++) {
          // console.log(this.tableset.trs[row].tds[col]);
          if (this.tableset.trs[row].tds[col].com) {
            // console.log(123);
            this.tableset.trs[row].tds[col].tdheight = 32;
            this.tableset.trs[row].tds[col + 1].tdheight = 32;
            this.tableset.trs[row].tds[col].com.comstyles.height = 32;
            this.cellfocused = this.tableset.trs[row].tds[col];
            this.settdsize(32, "height");
          }
        }
      }
    },
    widthInit() {
      for (let row = 0; row < this.tableset.trs.length; row++) {
        for (let col = 0; col < this.tableset.trs[row].tds.length; col++) {
          // console.log(this.tableset.trs[row].tds[col]);
          if (this.tableset.trs[row].tds[col].com) {
            // console.log(123);
            this.tableset.trs[row].tds[col].tdwidth = 121;
            this.tableset.trs[row].tds[col].com.comstyles.width = 121;
            this.cellfocused = this.tableset.trs[row].tds[col];
            this.settdsize(121, "width");
          }
        }
      }
      //   this.tableset.trs.forEach(row => {
      //     if (row && row.tds) {
      //       row.tds.forEach(col => {
      //         if (col && col.com) {
      //           col.com.comstyles.height = 32
      //           this.$set(col, 'tdwidth', 32);
      //         }
      //       })
      //     }
      //   })
    },
    wfTypeChange(val) {
      if (val === 9) {
        //禁用
        this.wfChoosable = true;
        this.tdcom.comattrs.wfNode = [0];
        this.wfNames = "禁用";
      } else if (val === 6) {
        this.tdcom.comattrs.wfNode = [999999];
        this.wfNames = "全部";
        this.wfChoosable = true;
      } else if (val == 12) {
        this.tdcom.comattrs.wfNode = [-1];
        this.wfNames = "忽略";
        this.wfChoosable = true;
      } else {
        this.wfChoosable = true;
        this.wfChoosable = false;
        let arr = [];
        for (let id in this.wfCheckboxMap) {
          if (this.wfCheckboxMap[id] && this.wfNodeMapHash[id])
            arr.push(this.wfNodeMapHash[id]);
        }
        this.wfNames = arr.join(",");
      }
    },
    wfNodeChange() {
      let arr = [];
      for (let key in this.wfCheckboxMap) {
        if (this.wfCheckboxMap[key] && this.wfNodeMapHash[key]) {
          arr.push(key);
        }
      }
      this.tdcom.comattrs.wfNode = arr;
      console.log('选中触发', arr);
      this.getWfNodeNames(arr);
    },
    // 可用节点点击弹框
    inputClick(e) {
      this.wfCheckboxMap = {};
      this.tdcom.comattrs.wfNode &&
        this.tdcom.comattrs.wfNode.map((item) => {
          this.wfCheckboxMap[item] = true;
        });
      let Y = e.clientY + 15;
      this.wfPositionStyle = "right:0px;top:" + Y + "px;";
      setTimeout(() => {
        this.wfDialogVisible = true;
      }, 250);
    },
    selectBlur(e) {
      this.tdcom.comevents[this.currentComeventAttrkey] = e.target.value;
    },
    selectFocus(val) {
      this.currentComeventAttrkey = val;
    },
    // 监测页面点击事件，隐藏单位树菜单
    globalClick() {
      document.addEventListener("click", (e) => {
        let wfDialog = document.getElementsByClassName("wfDialog")[0];
        if (wfDialog) {
          if (e.target.contains(wfDialog) || wfDialog.contains(e.target)) {
            this.wfDialogVisible = true;
          } else {
            this.wfDialogVisible = false;
          }
        }
      });
    },
    getWfNodeNames(arr) {
      let names = "";
      if (arr) {
        if (arr[0] === 0) {
          this.wfType = 9;
          this.wfNames = "禁用";
          this.wfChoosable = true;
        } else if (arr[0] === 999999) {
          this.wfNames = "全部";
          this.wfType = 6;
          this.wfChoosable = true;
        } else {
          this.wfChoosable = false;
          this.wfType = 3;
          for (let wfClassId in this.wfNodeMap) {
            this.wfNodeMap[wfClassId].forEach((node) => {
              arr.forEach((currentNode) => {
                if (node.code === currentNode) {
                  names = names + node.name + ",";
                }
              });
            });
          }
          this.wfNames = names.substr(0, names.length - 1);
        }
      }
    },
    fieldSearch() {
      this.searchFieldDialogVisible = true;
      this.searchFieldName = "";
      this.fieldPositionMap = [];
      this.searchResult = "";
    },
    search() {
      this.fieldPositionMap = [];
      let datas = this.tableset.trs;
      for (let row = 0; row < datas.length; row++) {
        for (let col = 0; col < datas[row].tds.length; col++) {
          if (datas[row].tds[col].com && datas[row].tds[col].com.comattrs) {
            if (datas[row].tds[col].com.comattrs.fieldName) {
              if (this.getFieldNames) {
                if (
                  datas[row].tds[col].com.comattrs.fieldName.toUpperCase().indexOf(this.getFieldNames.toUpperCase()) != -1
                ) {
                  let arr = {
                    Y: col + 1,
                    X: row + 1,
                  };
                  this.fieldPositionMap.push(arr)
                }
              } else {
                if (
                  datas[row].tds[col].com.comattrs.fieldName.toUpperCase().indexOf(this.searchFieldName.toUpperCase()) != -1
                ) {
                  let arr = {
                    Y: col + 1,
                    X: row + 1,
                  };
                  this.fieldPositionMap.push(arr);
                }
              }

            }
          }
        }
      }
      this.searchResult =
        this.fieldPositionMap.length === 0 ? "没有该字段" : "";
    },
    fieldCheck() {
      this.repeatFieldMap = [];
      let datas = this.tableset.trs;
      for (let i = 0; i < datas.length; i++) {
        for (let j = 0; j < datas[i].tds.length; j++) {
          if (
            datas[i].tds[j].com &&
            datas[i].tds[j].com.comattrs &&
            datas[i].tds[j].com.comattrs.fieldName
          ) {
            let result = this.theSameOrNot(datas[i].tds[j]);
            if (Object.keys(result).length > 0) {
              if (result.row !== j || result.column !== i) {
                let repeatFieldObj = {
                  repeatFieldRow1: i + 1,
                  repeatFieldColumn1: j + 1,
                  repeatFieldRow2: result.column + 1,
                  repeatFieldColumn2: result.row + 1,
                  repeatFieldName: result.fieldName,
                };
                this.repeatFieldMap.push(repeatFieldObj);
              }
            }
          }
        }
      }
      if (this.repeatFieldMap.length === 0) {
        this.message("没有重复字段！", 1);
        return;
      } else {
        this.repeatFieldWarning = true;
      }
    },
    theSameOrNot(field) {
      let datas = this.tableset.trs;
      for (let i = 0; i < datas.length; i++) {
        for (let j = 0; j < datas[i].tds.length; j++) {
          if (
            datas[i].tds[j].com &&
            datas[i].tds[j].com.comattrs &&
            datas[i].tds[j].com.comattrs.fieldName
          ) {
            if (
              field.com.comattrs.fieldName ===
              datas[i].tds[j].com.comattrs.fieldName
            ) {
              let fieldObj = {
                fieldName: datas[i].tds[j].com.comattrs.fieldName,
                row: j,
                column: i,
              };
              return fieldObj;
            }
          }
        }
      }
    },
    deepCopy(obj) {
      //复杂数据复制
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (obj[key] === null) {
            result[key] = null;
          } else if (typeof obj[key] === "object") {
            result[key] = this.deepCopy(obj[key]); //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    },
    inittable() {
      let tableset = {};
      let $trs = [];
      for (let i = 0; i < this.inittrs; i++) {
        let $tds = [];
        for (let j = 0; j < this.inittds; j++) {
          let $td = this.deepCopy(this.inittd);
          let cf = this.deepCopy(com);
          this.$set($td, "com", cf);
          $tds.push($td);
        }
        let tr = {};
        this.$set(tr, "tds", $tds);
        $trs.push(tr);
      }
      this.$set(tableset, "trs", $trs);

      this.tableset = tableset;
      this.setcomsize();
      this.sethiddentd();
      this.settablesize();
    },
    tdcellsselected(e, td, i, j, trs) {
      if (this.copycom) {
        this.setStyle(e, td, i, j);
      }

      // ctrlKey  shiftKey altKey //单元格选中的时候  要初始化  单元格属性的 下拉字段
      // 字段查找，点击后才消失颜色
      if (this.$refs.reftable.children[i].childNodes[j].children[0].style.backgroundColor == 'yellow') {
        this.searchFieldName = ''
      }
      // 自己加的
      if (td.com.comattrs.wfNode === null) {
        this.wfNames = null
      }
      this.getWfNodeNames(td.com.comattrs.wfNode);
      let cellfocused = {};
      this.$set(cellfocused, "td", td);
      this.$set(cellfocused, "trindex", i);
      this.$set(cellfocused, "tdindex", j);
      this.cellfocused = cellfocused;
      this.clearBackColor(trs);
      this.mouseDown = true;
      this.movePosition.starttrindex = i;
      this.movePosition.starttdindex = j;
      this.movePosition.endtrindex = i + td.rowspan - 1;
      this.movePosition.endtdindex = j + td.colspan - 1;
      this.setBackColor();
      this.showspan = true;
      console.log(td.com);
      this.tdcom = td.com;// 控制右侧信息显示
      this.ctd = td;

      this.initFieldOption();
      this.coordinate = '(' + (i + 1) + ',' + (j + 1) + ')'
      // if(this.tdcom.comattrs && this.tdcom.comattrs.showDetail){
      //   this.tdcom.comattrs.showDetail = this.tdcom.comattrs.showDetail.toUpperCase()
      // }
      // console.log(this.tdcom.comattrs.showDetail);
      console.log('点击单元格显示信息', td, i, j);
    },
    tdcellsselectedend(e, td, i, j) {
      this.mouseDown = false;
    },
    clearBackColor(trs, fieldColor) {
      console.log(trs);
      //鼠标move后  ,会选中很多颜色, 所以遍历tablese  然后全部还原颜色
      console.log('this.$refs.reftable.children', this.$refs.reftable.children);
      for (let i = 0; i < this.$refs.reftable.children.length; i++) {
        for (
          let j = 0;
          j < this.$refs.reftable.children[i].childNodes.length;
          j++
        ) {
          if (this.$refs.reftable.children[i].childNodes[j].style) {
            //	this.$refs.reftable.children[i].childNodes[j].style.borderColor = '#ccc';
            this.$refs.reftable.children[i].childNodes[
              j
            ].style.backgroundColor = "#fff";
            if (
              this.$refs.reftable.children[i].childNodes[j].childNodes.length >
              0
            ) {
              if (
                this.$refs.reftable.children[i].childNodes[j].childNodes[0]
                  .nodeName == "DIV"
              ) {
                // 新增编辑表单显示高亮
                if (trs) {
                  if (trs[i].tds[j].com.comattrs.tableIdx == null) {
                    if (trs[i].tds[j].com.comattrs.fieldName == null && trs[i].tds[j].com.comattrs.showDetail == null) {
                      this.$refs.reftable.children[i].childNodes[
                        j
                      ].childNodes[0].style.backgroundColor = '#afdcd7'
                    }
                  } else {
                    this.$refs.reftable.children[i].childNodes[
                      j
                    ].childNodes[0].style.backgroundColor = this.tableset.trs[
                      i
                    ].tds[j].com.comstyles.background;
                  }
                }
              }
            }
          }
        }
      }
      if (this.fieldNewName && this.searchFieldName) {
        this.fieldNewName.forEach(item => {
          this.$refs.reftable.children[item.X - 1].childNodes[item.Y - 1].children[0].style.backgroundColor = 'yellow'
        })
      }
    },
    setBackColor() {
      if (
        this.movePosition.starttrindex > -1 &&
        this.movePosition.starttdindex > -1 &&
        this.movePosition.endtrindex > -1 &&
        this.movePosition.endtdindex > -1
      ) {
        //		    			topline		reftable.children[""0""].childNodes
        for (
          let i = this.movePosition.starttrindex;
          i <= this.movePosition.endtrindex;
          i++
        ) {
          for (
            let j = this.movePosition.starttdindex;
            j <= this.movePosition.endtdindex;
            j++
          ) {
            if (this.$refs.reftable.children[i].childNodes[j].style) {
              this.$refs.reftable.children[i].childNodes[
                j
              ].style.backgroundColor = "#54aaef14";

              if (
                this.$refs.reftable.children[i].childNodes[j].childNodes
                  .length > 0
              ) {
                if (
                  this.$refs.reftable.children[i].childNodes[j].childNodes[0]
                    .nodeName == "DIV"
                ) {
                  this.$refs.reftable.children[i].childNodes[
                    j
                  ].childNodes[0].style.backgroundColor = "#54aaef14";
                }
              }
            }
          }
        }
      }
    },
    tdmousemove(e, td, i, j) {
      //单元格鼠标进入的时候，进入底部显示行移动的箭头，按住左键可移动行高   进入右侧显示 列移动箭头 ，按住左键可以移动列宽
      if (!this.rowlineclicked) {
        let clicky = e.target.clientHeight - e.offsetY; //鼠标距离底部的距离
        let clickx = e.target.clientWidth - e.offsetX; //鼠标距离右边的距离
        if (clicky < 5 && clickx > 10) {
          //拖拉单元格的高度
          this.cursor = "row";
          this.$refs.rowline.style.top = e.clientY - 6 + "px";
          let temprow = i + td.rowspan - 1;
          let tempcol = j + td.colspan - 1;
          this.directVal.row = temprow;
          this.directVal.col = tempcol;
          this.directVal.self = this;
          this.directVal.param = this.tableset.trs[temprow].tds[
            tempcol
          ].tdheight; //取合并单元格的最右下方的单元格高度
          this.$set(this.directVal, "func", this.rowlinemove);
        } else {
          if (clicky > 10 && clickx < 5) {
            //拖拉单元格的宽度
            this.cursor = "col";
            this.$refs.colline.style.top = this.$refs.reftable.offsetTop + "px";
            this.$refs.colline.style.left = e.clientX - 5 + "px";
            let temprow = i + td.rowspan - 1;
            let tempcol = j + td.colspan - 1;
            this.directVal.row = temprow;
            this.directVal.col = tempcol;
            this.directVal.self = this;
            this.directVal.param = this.tableset.trs[temprow].tds[
              tempcol
            ].tdwidth; //取合并单元格的最右下方的单元格宽度
            this.$set(this.directVal, "func", this.collinemove);
          } else {
            this.cursor = "";
          }
        }
      }
      if (this.mouseDown) {
        //计算 当前鼠标移动单元格所在的行数 列数 ，要考虑当前单元格的合并单元格后的行数列数
        this.showspan = false; //在鼠标移动的时候 不显示  span  要不然会很难看
        this.movePosition.endtrindex =
          this.movePosition.endtrindex > i + td.rowspan - 1
            ? this.movePosition.endtrindex
            : i + td.rowspan - 1;
        this.movePosition.endtdindex =
          this.movePosition.endtdindex > j + td.colspan - 1
            ? this.movePosition.endtdindex
            : j + td.colspan - 1;
        this.setBackColor();
      }
    },
    settdsize(e, field) {
      if (field == "height" && this.cellfocused) {
        if (typeof (e) === 'string') {
          this.tableset.trs[this.cellfocused.trindex].tds.forEach((v, index) => {
            v.tdheight = parseFloat(e);
          });
        } else {
          for (let i = 0; i < this.tableset.trs.length; i++) {
            for (let j = 0; j < this.tableset.trs[i].tds.length; j++) {
              if (this.tableset.trs[i].tds[j].com) {
                this.tableset.trs[i].tds[j].tdheight = parseFloat(e);
              }
            }
          }
        }
        this.setcomsize();
        this.settablesize();
      }
      if (field == "width" && this.cellfocused) {
        if (typeof (e) === 'string') {
          this.tableset.trs.forEach((v, index) => {
            v.tds[this.cellfocused.tdindex].tdwidth = parseFloat(e);
          });
        } else {
          for (let i = 0; i < this.tableset.trs.length; i++) {
            for (let j = 0; j < this.tableset.trs[i].tds.length; j++) {
              if (this.tableset.trs[i].tds[j].com) {
                this.tableset.trs[i].tds[j].tdwidth = parseFloat(e);
              }
            }
          }
        }
        this.setcomsize();
        this.settablesize();
      }
    },

    rowlinemove(e, row, col, changelen) {
      //div线移动
      this.tableset.trs[row].tds.forEach((v, index) => {
        v.tdheight = parseFloat(e);
      });
      this.setcomsize();
      this.settablesize();
    },
    collinemove(e, row, col, changelen) {
      //div线移动
      this.tableset.trs.forEach((v, index) => {
        v.tds[col].tdwidth = parseFloat(e);
      });
      this.setcomsize();
      this.settablesize();
    },
    setcomsize() {
      //计算单元格大小 设置单元尺寸
      this.tableset.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          if (td.com != null) {
            let tdwidth = 0;
            let tdheight = 0;
            let tw = false;
            let th = false;
            for (let i = trindex; i < td.rowspan + trindex; i++) {
              if (tdheight > 0) {
                th = true;
                tdheight =
                  tdheight +
                  parseFloat(
                    this.tableset.trs[i].tds[tdindex].com.comstyles.bordertop
                  );
              }
              tdheight =
                tdheight +
                parseFloat(this.tableset.trs[i].tds[tdindex].tdheight);
              if (i == trindex) {
                if (this.tableset.trs[i].tds[tdindex].btop == "none") {
                  tdheight = tdheight + 1;
                }
              }
              for (let j = tdindex; j < td.colspan + tdindex; j++) {
                if (i == trindex) {
                  tdwidth =
                    tdwidth + parseFloat(this.tableset.trs[i].tds[j].tdwidth);
                }
              }
            }

            if (
              td.com.comstyles.width != tdwidth ||
              td.com.comstyles.height != tdheight
            ) {
              this.$set(td.com.comstyles, "width", tdwidth - 1); //宽度必须减去线的宽度
              this.$set(td.com.comstyles, "height", tdheight); //height 不用减 ，因为底部的td底部的线属于下一行td的top，不属于当前td的
            }
            //							if(td.com.comstyles.width != (tdwidth - 1.2) || td.com.comstyles.height != (tdheight - 1.2)) {
            //								this.$set(td.com.comstyles, 'width', tdwidth - 1.2);
            //								this.$set(td.com.comstyles, 'height', tdheight - 1.2);
            //							}
          }
        });
      });
    },
    settablesize() {
      //计算table的尺寸，配置table外的div的尺寸
      let th = 0;
      let tw = 0;
      let $trs = this.tableset.trs;

      for (let i = 0; i < $trs.length; i++) {
        if (i == 0) {
          let $tds = $trs[i].tds;
          for (let j = 0; j < $tds.length; j++) {
            tw = parseFloat($tds[j].tdwidth) + tw; //border = 1
          }
        }
        th = parseFloat($trs[i].tds[0].tdheight) + th; //border = 1
      }

      this.tablewidth = tw + 1;
      this.tableheight = th + 1;
    },

    merge(e) {
      //根据选中的单元格计算出最左上和最右下的格子 ，进行合并
      if (
        this.movePosition.starttrindex > -1 &&
        this.movePosition.starttdindex > -1 &&
        this.movePosition.endtrindex > -1 &&
        this.movePosition.endtdindex > -1
      ) {
        for (
          let i = this.movePosition.starttrindex;
          i <= this.movePosition.endtrindex;
          i++
        ) {
          for (
            let j = this.movePosition.starttdindex;
            j <= this.movePosition.endtdindex;
            j++
          ) {
            let td = this.tableset.trs[i].tds[j];
            if (
              i == this.movePosition.starttrindex &&
              j == this.movePosition.starttdindex
            ) {
              this.$set(
                td,
                "rowspan",
                this.movePosition.endtrindex -
                this.movePosition.starttrindex +
                1
              );
              this.$set(
                td,
                "colspan",
                this.movePosition.endtdindex -
                this.movePosition.starttdindex +
                1
              );
            } else {
              this.$set(td, "rowspan", 0);
              this.$set(td, "colspan", 0);
            }
          }
        }
        this.clearBackColor();
        this.setcomsize();
      }
    },
    split(e) {
      //拆分
      if (this.cellfocused) {
        let iend = this.cellfocused.td.rowspan + this.cellfocused.trindex; // 占几行，在第几个开始
        let jend = this.cellfocused.td.colspan + this.cellfocused.tdindex;
        for (let i = this.cellfocused.trindex; i < iend; i++) {
          for (let j = this.cellfocused.tdindex; j < jend; j++) {
            this.$set(this.tableset.trs[i].tds[j], "rowspan", 1);
            this.$set(this.tableset.trs[i].tds[j], "colspan", 1);
          }
        }
        this.clearBackColor();
        this.setcomsize();
      }
    },
    addrow(e) {
      //增加一行
      this.clearhiddentd(); //删除隐藏的td
      let $tr = {};
      let tds = [];
      this.tableset.trs[0].tds.forEach((v) => {
        //根据每列的宽度，依次增加td，最后把tds添加到tr并加入table
        let td = this.deepCopy(this.inittd);
        this.$set(td, "tdwidth", v.tdwidth);
        let cf = this.deepCopy(com);
        this.$set(td, "com", cf);
        tds.push(td);
      });
      this.$set($tr, "tds", tds);
      this.tableset.trs.push($tr);
      this.setcomsize();
      this.sethiddentd(); //添加隐藏td
      this.settablesize(); //重新计算table的尺寸
    },
    addcol(e) {
      //增加列  ，先删除隐藏的td，根据每行高度，在每行末尾加入td，然后加入隐藏td，重新计算table尺寸
      this.clearhiddentd();
      this.tableset.trs.forEach((v, index) => {
        let td = this.deepCopy(this.inittd);
        this.$set(td, "tdheight", v.tds[0].tdheight);
        let cf = this.deepCopy(com);
        this.$set(td, "com", cf);
        this.tableset.trs[index].tds.push(td);
      });
      this.setcomsize();
      this.sethiddentd();
      this.settablesize();
    },
    delrow(e) {
      //根据选中的单元，删除隐藏td，然后删除行，再加上隐藏td，重新计算table尺寸
      if (this.cellfocused) {
        if (this.tableset.trs.length > 2) {
          let i = this.cellfocused.trindex;
          this.clearhiddentd();
          if (i < this.tableset.trs.length) {
            this.setrowspan(i); //如果当前删除行有合并单元格，那么先释放合并的单元格
            this.tableset.trs.splice(i, 1);
            this.setcomsize();
            this.sethiddentd();
            this.settablesize();
          }
        }
      }
      this.cellfocused = null;
      this.clearBackColor();
    },
    addrowspan(row) {
      for (let i = 0; i < row; i++) {
        //插入行 前面的单元格遍历，查找合并单元格是不是包含插入行
        let tr = this.tableset.trs[i];
        tr.tds.forEach((td, tdindex) => {
          if (td.rowspan + i > row) {
            td.rowspan = td.rowspan + 1; //合并单元格包含当前行 ，那么合并行范围 加1
            for (let tri = i; tri < i + td.rowspan; tri++) {
              //把这个单元格下，包含的单元格设置为0，不让显示，
              for (let tdi = tdindex; tdi < tdindex + td.colspan; tdi++) {
                if (tri != i || tdi != tdindex) {
                  //除了当前单元格，在rowspan   colspan 内的单元格都设置为0
                  this.tableset.trs[tri].tds[tdi].rowspan = 0;
                  this.tableset.trs[tri].tds[tdi].colspan = 0;
                }
              }
            }
          }
        });
      }
    },
    insertrow(e) {
      if (this.cellfocused) {
        let i = this.cellfocused.trindex;
        this.clearhiddentd(); //删除隐藏的td
        let $tr = {};
        let tds = [];
        this.tableset.trs[i].tds.forEach((v) => {
          //根据每列的宽度，依次增加td，最后把tds添加到tr并加入table
          let td = this.deepCopy(this.inittd);
          this.$set(td, "tdwidth", v.tdwidth);
          let cf = this.deepCopy(com);
          this.$set(td, "com", cf);
          tds.push(td);
        });
        this.$set($tr, "tds", tds);
        this.tableset.trs.splice(i, 0, $tr);
        this.addrowspan(i);
        this.setcomsize();
        this.sethiddentd(); //添加隐藏td
        this.settablesize(); //重新计算table的尺寸
      }
    },
    addcolspan(j) {
      this.tableset.trs.forEach((tr, trindex) => {
        //遍历trs
        for (let i = 0; i < j; i++) {
          //取插入列前面的没一个单元格
          let td = tr.tds[i]; //取出td
          if (td.colspan + i > j) {
            //td的合并超过插入列
            td.colspan = td.colspan + 1; //扩大 colspan  并把当前行并行合并列下的所有td单元隐藏
            for (let tri = trindex; tri < trindex + td.rowspan; tri++) {
              for (let tdi = i; tdi < i + td.colspan; tdi++) {
                if (tri != trindex || tdi != i) {
                  //除了当前单元格，在rowspan   colspan 内的单元格都设置为0
                  this.tableset.trs[tri].tds[tdi].rowspan = 0;
                  this.tableset.trs[tri].tds[tdi].colspan = 0;
                }
              }
            }
          }
        }
      });
    },
    insertcol(e) {
      if (this.cellfocused) {
        let j = this.cellfocused.tdindex;
        this.clearhiddentd(); //删除隐藏的td
        let $tr = {};
        let tds = [];
        this.tableset.trs.forEach((tr, trindex) => {
          let td = this.deepCopy(this.inittd);
          let cf = this.deepCopy(com);
          this.$set(td, "com", cf);
          tr.tds.splice(j, 0, td);
        });
        this.addcolspan(j);
        this.setcomsize();
        this.sethiddentd(); //添加隐藏td
        this.settablesize(); //重新计算table的尺寸
      }
    },
    delcol(e) {
      if (this.cellfocused) {
        if (this.tableset.trs[0].tds.length > 2) {
          //留一列
          let j = this.cellfocused.tdindex;
          this.clearhiddentd();
          if (j < this.tableset.trs[0].tds.length) {
            this.setcolspan(j);
            for (let i = 0; i < this.tableset.trs.length; i++) {
              this.tableset.trs[i].tds.splice(j, 1);
            }
            this.setcomsize();
            this.sethiddentd();
            this.settablesize();
          }
        }
      }
      this.cellfocused = null;
      this.clearBackColor();
    },
    sethiddentd() {
      //设置隐藏的td
      let tds = [];
      this.tableset.trs[0].tds.forEach((v) => {
        //添加table底部的td
        let td = this.deepCopy(this.tdset);
        this.$set(td, "tdwidth", v.tdwidth);
        this.$set(td, "tdheight", 0);
        tds.push(td);
      });
      let $tds = {
        tds: tds,
      };
      this.tableset.trs.push($tds);

      this.tableset.trs.forEach((v, index) => {
        //添加table右侧的td
        let td = this.deepCopy(this.tdset);
        this.$set(td, "tdwidth", 0);
        this.$set(td, "tdheight", v.tds[0].tdheight);
        this.tableset.trs[index].tds.push(td);
      });
    },
    clearhiddentd() {
      //删除 table 底部和右侧的  隐藏td
      if (this.tableset.trs.length > 1) {
        this.tableset.trs.pop();
      }
      this.tableset.trs.forEach((v, index) => {
        if (v.tds.length > 1) {
          v.tds.pop();
        }
      });
    },
    setcolspan(col) {
      let tdspandel = [];
      this.tableset.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          if (tdindex == col) {
            //删除列 有没有跨列合并
            if (td.colspan > 1) {
              let iend = td.rowspan + trindex;
              let jend = td.colspan + tdindex;
              for (let i = trindex; i < iend; i++) {
                for (let j = tdindex; j < jend; j++) {
                  this.tableset.trs[i].tds[j].rowspan = 1;
                  this.tableset.trs[i].tds[j].colspan = 1;
                }
              }
            }
          } else {
            //删除列 有没有被跨列合并
            if (td.colspan + tdindex > col && tdindex < col) {
              let tdkey = trindex + "-" + tdindex;
              if (tdspandel.indexOf(tdkey)) {
                tdspandel.push(tdkey);
                td.colspan = td.colspan - 1;
              }
            }
          }
        });
      });
    },
    setrowspan(row) {
      let tdspandel = [];
      this.tableset.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          if (trindex == row) {
            //当前行是要删除行 有没有跨行合并
            if (td.rowspan > 1) {
              //判断当前删除行的单元格有没有合并，合并的话，要把合并的单元格释放出来
              let iend = td.rowspan + trindex;
              let jend = td.colspan + tdindex;
              for (let i = trindex; i < iend; i++) {
                //释放它的单元格
                for (let j = tdindex; j < jend; j++) {
                  this.tableset.trs[i].tds[j].rowspan = 1;
                  this.tableset.trs[i].tds[j].colspan = 1;
                }
              }
            }
          } else {
            //当前单元不是 删除行 ，判断当前单元格 是否 存在行合并 ，如果存在行合并 并且合并了删除行 ，那么它的rowspan 要减一
            if (td.rowspan + trindex > row && trindex < row) {
              let tdkey = trindex + "-" + tdindex;
              if (tdspandel.indexOf(tdkey)) {
                tdspandel.push(tdkey);
                td.rowspan = td.rowspan - 1;
              }
            }
          }
        });
      });
    },
    delline() {
      //删除单元格的线
      if (this.cellfocused) {
        //		    		this.tableset

        this.cellfocused.td.bleft = "none";
        this.cellfocused.td.btop = "none";
        this.cellfocused.td.bright = "none";
        this.cellfocused.td.bbottom = "none";
        let ied = this.cellfocused.trindex + this.cellfocused.td.rowspan - 1;
        let jed = this.cellfocused.tdindex + this.cellfocused.td.colspan - 1;

        let trlen = this.tableset.trs.length - 1;
        let tdlen = this.tableset.trs[0].tds.length - 1;
        for (let i = this.cellfocused.trindex; i <= ied; i++) {
          for (let j = this.cellfocused.tdindex; j <= jed; j++) {
            if (i == this.cellfocused.trindex && this.cellfocused.trindex > 0) {
              this.tableset.trs[i - 1].tds[j].bbottom = "none";
            }
            if (i == ied && ied < trlen) {
              this.tableset.trs[i + 1].tds[j].btop = "none";
            }
            if (j == this.cellfocused.tdindex && this.cellfocused.tdindex > 0) {
              this.tableset.trs[i].tds[j - 1].bright = "none";
            }
            if (j == jed && jed < tdlen) {
              this.tableset.trs[i].tds[j + 1].bleft = "none";
            }
          }
        }
      }
    },
    addLeftLine() {
      //加左侧线
      if (this.cellfocused) {
        this.cellfocused.td.bleft = "solid";
      }
    },
    addTopLine() {
      //加顶部线
      if (this.cellfocused) {
        this.cellfocused.td.btop = "solid";
      }
    },
    addRightLine() {
      //加右侧线
      if (this.cellfocused) {
        this.cellfocused.td.bright = "solid";
      }
    },
    addBottomLine() {
      //加底部线
      if (this.cellfocused) {
        this.cellfocused.td.bbottom = "solid";
      }
    },
    addtextLine() {
      if (this.cellfocused) {
        if (this.cellfocused.td.com.comstyles.textline == "none") {
          this.cellfocused.td.com.comstyles.textline =
            this.cellfocused.td.com.comstyles.borderbottom +
            "px solid " +
            this.cellfocused.td.com.comstyles.colorbottom;
        } else {
          this.cellfocused.td.com.comstyles.textline = "none";
        }
      }
    },
    write() {
      console.log(JSON.stringify(this.tableset));
    },
    previewCell() {
      this.messageInput("输入表单id").then((v) => {
        if (v.value != "") {
          this.workId = 0;
          this.tworkId = null;
          this.wpId = parseInt(v.value);
          this.opratetype = "new";
          this.showCell = true;
        }
      });
    },
    closeCell() {
      this.showCell = false;
    },
    //			复制单元格样式
    copyStyle() {
      this.copycom = this.tdcom;
      this.message("样式复制成功，双击需要粘贴样式的单元格", 1);
    },
    //			把当前单元格的样式设置成复制单元格的样式
    setStyle(e, td, i, j) {
      if (this.copycom) {
        this.$set(
          td.com.comstyles,
          "font-family",
          this.copycom.comstyles["font-family"]
        );
        this.$set(
          td.com.comstyles,
          "font-size",
          this.copycom.comstyles["font-size"]
        );
        this.$set(
          td.com.comstyles,
          "font-weight",
          this.copycom.comstyles["font-weight"]
        );
        this.$set(td.com.comstyles, "color", this.copycom.comstyles["color"]);
        this.$set(
          td.com.comstyles,
          "background",
          this.copycom.comstyles["background"]
        );
        this.$set(
          td.com.comstyles,
          "text-align",
          this.copycom.comstyles["text-align"]
        );
        //新增
        this.$set(
          td.com.comstyles,
          "borderbottom",
          this.copycom.comstyles["borderbottom"]
        );
        this.$set(
          td.com.comstyles,
          "borderleft",
          this.copycom.comstyles["borderleft"]
        );
        this.$set(
          td.com.comstyles,
          "borderright",
          this.copycom.comstyles["borderright"]
        );
        this.$set(
          td.com.comstyles,
          "bordertop",
          this.copycom.comstyles["bordertop"]
        );
        this.$set(
          td.com.comstyles,
          "colorbottom",
          this.copycom.comstyles["colorbottom"]
        );
        this.$set(
          td.com.comstyles,
          "colorleft",
          this.copycom.comstyles["colorleft"]
        );
        this.$set(
          td.com.comstyles,
          "colorright",
          this.copycom.comstyles["colorright"]
        );
        this.$set(
          td.com.comstyles,
          "colortop",
          this.copycom.comstyles["colortop"]
        );
        this.$set(
          td.com.comstyles,
          "offsetL",
          this.copycom.comstyles["offsetL"]
        );
        this.$set(
          td.com.comstyles,
          "offsetR",
          this.copycom.comstyles["offsetR"]
        );

        //					this.$set(td.com.comattrs,'showType',this.copycom.comattrs["showType"]);
        //					this.$set(td.com.comattrs,'showDetail',this.copycom.comattrs["showDetail"]);
        this.copycom = null;
      };
    },
    //	设置大标签  小标签
    setlabel(v) {
      let comstyles = this.deepCopy(labelStyles[v]);
      this.$set(this.tdcom.comstyles, "font-family", comstyles["font-family"]);
      this.$set(this.tdcom.comstyles, "font-size", comstyles["font-size"]);
      this.$set(this.tdcom.comstyles, "font-weight", comstyles["font-weight"]);
      this.$set(this.tdcom.comstyles, "color", comstyles["color"]);
      this.$set(this.tdcom.comstyles, "background", comstyles["background"]);
      this.$set(this.tdcom.comstyles, "text-align", comstyles["text-align"]);
      this.$set(this.tdcom.comattrs, "showType", 1);
      if (!this.tdcom.comattrs.showDetail) {
        //如果内容不存在设置为标签
        this.$set(this.tdcom.comattrs, "showDetail", "标签");
      }
      if (v == "input") {
        //如果是输入框则 清空 showDetail ，并设置输入框
        this.$set(this.tdcom.comattrs, "showType", 0);
        this.$set(this.tdcom.comattrs, "showDetail", null);
      }
    },
    //弹出 winCellAttr
    showWindCellAttr() {
      this.workId = null;
      this.showCellAttr = true;
    },
    closeCellAttr() {
      this.showCellAttr = false;
    },
    saveCellAttr(info) {
      //保存表单属性  由子组件保存
      this.showCellAttr = false;
      //				this.$set(this.comf.comattrs[0],'optionitem',this.cellinfo.table);
      //根据设定的表  来改变 comf 中下拉的表内容

      this.getWfMap(this.cellinfo.wf);
      this.initTableAttr();
      this.cleartableAndflow(); //如果流程或者表 有变动   清空流程和table
    },
    cleartableAndflow() {
      this.tableset.trs.forEach((tr, trindex) => {
        //遍历tableset  判断是否有表  流程变动，变动则清空  cleartalbe  clearflow
        tr.tds.forEach((td, tdindex) => {
          if (td.com) {
            if (td.com.comattrs.tableIdx != null) {
              //tableIdx  fieldName  fieldType   wfNode
              if (this.cleartalbe[td.com.comattrs.tableIdx]) {
                this.$set(td.com.comattrs, "tableIdx", null);
                this.$set(td.com.comattrs, "fieldName", null);
                this.$set(td.com.comattrs, "fieldType", null);
                this.$set(td.com.comattrs, "name", null);
                this.$set(td.com.comattrs, "wfNode", null);
              }
              if (this.clearflow) {
                this.$set(td.com.comattrs, "wfNode", null);
              }
            }
          }
        });
      });
    },
    initTableAttr() {
      //初始化 table 获取表单的talbe下拉option  ...
      let optionitem = [];
      if (this.cellinfo.table) {
        this.cellinfo.table.forEach((item, index) => {
          let obj = { value: index, label: item.tableName };
          optionitem.push(obj);
        });
      }
      console.log('这是右侧optionitem', optionitem);
      console.log(this.tdcom.comattrs);
      // this.$set(this.comf.comattrs[0], 'optionitem', optionitem);
      this.$set(
        this.comf.comattrs.find((a) => a.attrkey == "tableIdx"),
        "optionitem",
        optionitem
      );

      //初始化  field
    },
    getNode(id) {
      //option  获取流程节点  可用节点 下拉框配置
      // 点击设计表单中单元格会触发三次
      if (this.nodeOptionClass == null || this.nodeOptionClass != id) {
        //找不到流程 赋值为空
        let param = { classId: id };
        workflownode(param).then((res) => {
          if (res.success) {
            let optionitem = [];
            res.info.forEach((item, index) => {
              let obj = { value: item.code, label: item.name };
              optionitem.push(obj);
            });
            this.nodeOptionClass = id;

            this.$set(
              this.comf.comattrs.find((a) => a.attrkey == "wfNode"),
              "optionitem",
              optionitem
            );
            // this.$set(this.comf.comattrs[3], 'optionitem', optionitem);
          }
        });
      } else {
        if (this.nodeOptionClass == null) {
          this.$set(
            this.comf.comattrs.find((a) => a.attrkey == "wfNode"),
            "optionitem",
            []
          );
          // this.$set(this.comf.comattrs[3], 'optionitem', []);
        }
      }
    },
    initFieldOption() {
      // 点击设计表单中单元格会触发一次
      // 初始字段   初始流程节点  取字段
      console.log(this.tdcom, this.cellinfo.table);
      if (this.tdcom) {
        // 表索引  this.tdcom.comattrs.tableIdx   this.cellinfo.table中放着表名
        if (this.cellinfo.table.length > 0) {
          if (typeof this.tdcom.comattrs.tableIdx == "number") {
            this.setFieldOption(
              this.cellinfo.table[this.tdcom.comattrs.tableIdx].tableName
            );
          }
        } else {
          this.message("请先关联数据库表!", 3);
        }
      }
      //关联流程

      if (this.cellinfo.wf.length > 0) {
        this.cellinfo.wf.forEach((wf, index) => {
          //{value:item.code,label:item.name}
          this.getNode(wf.wfClass);
        });
      }
    },
    //数据交互   查询  保存 删除
    //根据classid  获取 表单信息，并设置单元格属性 ，不存在 就初始化
    getRep(id) {
      this.showCellAttr2 = false; //在获取表单信息的时候  不能打开表单属性的窗口，因为属性窗口的数据在表单信息里
      getRep({ classId: id }).then((res) => {
        //获取下拉框table option  取得table后要重新计算table 高度宽度
        if (res.success) {
          this.microId = res.info.microId
          // console.log(res.info.microId);
          if (JSON.parse(res.info.content)) {
            let temptableset = this.addComAttr(JSON.parse(res.info.content));
            // for(let i=0;i<temptableset.length;i++){
            //   for(let l=0,l<temptableset[i].tds.length;l++){
            //     if(temptableset[i].tds[l] && temptableset[i].tds[l].com.comattrs.showDetail){
            //       temptableset[i].tds[l].com.comattrs.showDetail = temptableset[i].tds[l].com.comattrs.showDetail.toUpperCase()
            //     }
            //   }
            // }
            // temptableset.trs.forEach(item => {
            //   item.tds.forEach(item1 => {
            //     if(item1.com && item1.com.comattrs && item1.com.comattrs.showDetail){

            //       item1.com.comattrs.showDetail = item1.com.comattrs.showDetail.toUpperCase()
            //     }
            //   })
            // })
            this.tableset = temptableset;
            console.log('这是tableset', temptableset);
            this.settablesize();
          } else {
            this.inittable();
          }
          //						//设置表单  属性  表单配置信息
          this.cellinfo = res.info;
          console.log('打印当前cellinfo内容', res.info);

          this.getWfMap(JSON.parse(JSON.stringify(this.cellinfo.wf)));

          //						this.$set(this.cellinfo,'initJs',this.tableset.initJs);//取消 从tableset 取js
          //						this.$set(this.cellinfo,'afterSaveJs',this.tableset.afterSaveJs);//增加表单保存后脚本   表单预览那里要 在加 afterSaveJs
          //						this.$set(this.cellinfo,'beforeSendJs',this.tableset.beforeSendJs);
          //初始化 表单 右边单元格属性
          this.initTableAttr();
          this.showCellAttr2 = true;
          this.version = res.info.id;
        } else {
          this.cellinfo = this.deepCopy(this.tcellinfo);
          this.cellinfo.classId = id;
          //下面注释的代码 是用来还原 误删的表单   记得注释 this.inittable();
          let temptableset = this.addComAttr(losttableset);
          this.tableset = temptableset;
          this.settablesize();

          //this.inittable();
          this.showCellAttr2 = true;
        }
        //					console.log(this.cellinfo);
        this.cellStr = deepCopy(this.cellinfo);
      });
    },
    reportsave() {
      //保存 表单属性  表单配置tableset
      this.setCellinfoField(); //保存 字段  信息
      this.tableset.trs.forEach(item => {
        item.tds.forEach(item1 => {
          if (item1.com && item1.com.comattrs && item1.com.comattrs.showDetail) {
            item1.com.comattrs.showDetail = item1.com.comattrs.showDetail.toUpperCase()
          }
        })
      })
      let temptableset = this.delComAttr(deepCopy(this.tableset)); //表单属性点击确定的时候已经把三个js赋值给tableset了
      this.cellinfo.content = JSON.stringify(temptableset);
      this.$set(this.cellinfo, "classId", this.cellid);
      console.log('提交信息内容', this.cellinfo);
      this.cellinfo.microId = this.microId
      reportsave(this.cellinfo).then((res) => {
        if (res.success) {
          this.cellinfo = res.info;
          this.message("保存成功！", 1);
        } else {
          console.log(res.msg);
          this.message(res.msg, 3);
        }
      });
    },
    selectChange(v, field, comattr) {
      //table 下拉变更  , 根据 索引 获取 表名   //字段变更后  设置 cellinfo 中的字段
      if (field == "tableIdx") {
        if (typeof v == "number") {
          if (this.selectChangetimeOut) clearTimeout(this.selectChangetimeOut);
          else {
            this.selectChangetimeOut = setTimeout(() => {
              this.setFieldOption(this.cellinfo.table[v].tableName);
            }, 200);
          }
        } else {
          //清空字段 和 类型
          this.$set(this.tdcom.comattrs, "fieldName", null);
          this.$set(this.tdcom.comattrs, "fieldType", null);
          this.$set(this.tdcom.comattrs, "name", null);
        }
      }
      if (field == "fieldName") {
        //选中下拉框字段  自动更新 字段类型
        console.log(v);
        console.log(this.tableset);
        this.comf.comattrs
          .find((a) => a.attrkey == "fieldName")
          .optionitem.forEach((op, index) => {
            if (op.value == v) {
              this.tdcom.comattrs.fieldType = op.fieldType;
              this.$set(this.tdcom.comattrs, "name", op.note);
            }
          });
      }
    },
    setFieldOption(tabName) {
      //设置字段下拉框  option	,下拉字段根据 table 变动而变动,点击表单单元格的时候需要初始化字段
      let param = { tableName: tabName };
      // console.log(66666)
      if (tabName == this.lastTabName) return;
      listColumns(param).then((res) => {
        if (res.success) {
          //字段 放在 comf.comattrs[1]
          let optionitem = [];
          let arr = [];
          res.info &&
            res.info.forEach((item, index) => {
              let obj = {
                value: item.name,
                label: item.name,
                fieldType: item.datatype,
                note: item.note,
              };
              optionitem.push(obj);
              arr.push({ value: item.note });
            });

          this.$set(
            this.comf.comattrs.find((a) => a.attrkey == "fieldName"),
            "optionitem",
            optionitem
          );
          this.$set(
            this.comf.comattrs.find((a) => a.attrkey == "name"),
            "optionitem",
            arr
          );

          this.autocompleteHash["name"] = arr;
          // console.log(arr)
          this.lastTabName = tabName;
        }
      });
    },
    getVersion() {
      //查询流程版本
      reportquery({ classId: this.cellid }).then((res) => {
        if (res.success) {
          this.versions = res.info;
        }
      });
    },
    setCellinfoField() {
      //在保存前 把 td.com 的属性  和 事件 设置到  this.cellinfo.field中去
      //遍历 tableset 存在 那么更改 cellinfo 中的内容  ,不存在则插入

      //遍历cellinfo  查 tableset 是否存在 不存在 删除cellinfo的内容
      let infofield = []; //字段  变量   流程

      let tblInd = 0;
      let $addrow = false;
      // console.log('tableset',this.tableset.trs);
      this.tableset.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          //						td.com.comattrs.tableIdx   td.com.comattrs.fieldName
          //com中的内容 设到  cellinfo 中
          if (td.com) {
            if (td.com.comattrs.showType == 1) {
              this.$set(td.com.comattrs, "tableIdx", null);
              this.$set(td.com.comattrs, "fieldName", null);
              this.$set(td.com.comattrs, "fieldType", null);
            }

            if (
              typeof td.com.comattrs.tableIdx == "number" &&
              td.com.comattrs.fieldName
            ) {
              //设置了 table 和字段的  td 需要 设置到cellinfo中
              //								td.com.comattrs.fieldName = td.com.comattrs.fieldName.toLowerCase();//转小写
              //字段 设置
              let field = this.deepCopy(this.field); //从模板字段复制一份字段对象
              // console.log('this.cellinfo.field',this.cellinfo.field);
              this.cellinfo.field.forEach((item, index) => {
                //tableset 种遍历字段 跟 this.cellinfo.field 表的索引和字段名是否相同
                if (
                  td.com.comattrs.tableIdx == item.tableIdx &&
                  td.com.comattrs.fieldName.toUpperCase() == item.fieldName
                ) {
                  field = this.deepCopy(item);
                  // console.log('field',field);
                }
              });
              //把td.com.属性 事件  设到 field 中
              for (let key in td.com.comattrs) {
                if (key == "wfNode") {
                  //wfNode  td里存放的是数组，后台是字符串，要进行转换
                  if (td.com.comattrs[key]) {
                    this.$set(field, key, td.com.comattrs[key].join(","));
                  } else {
                    this.$set(field, key, null);
                  }
                } else {
                  this.$set(field, key, td.com.comattrs[key]);
                }
              }
              for (let key in td.com.comevents) {
                this.$set(field, key, td.com.comevents[key]);
              }

              for (let key in td.com.comstyles) {
                if (key == "addrow") {
                  if (td.com.comstyles[key]) {
                    tblInd = td.com.comattrs.tableIdx;
                    $addrow = true;
                  }
                }
              }
              infofield.push(field); //用数组 把field  存放起来，然后复制给 this.cellinfo.field
              // console.log('infofield',infofield);
            }
          }
        });
      });
      if ($addrow) {
        this.cellinfo.table[tblInd].addRow = $addrow;
      }
      this.cellinfo.field = infofield;
    },
    reportdetail() {
      //根据版本查
      reportdetail({ id: this.version }).then((res) => {
        if (res.success) {
          if (JSON.parse(res.info.content)) {
            let temptableset = this.addComAttr(JSON.parse(res.info.content));
            this.tableset = temptableset;
            //							this.tableset = JSON.parse(res.info.content);
            this.settablesize();
          } else {
            this.inittable();
          }
          //						//设置表单  属性  表单配置信息
          this.cellinfo = res.info;
          this.$set(this.cellinfo, "initJs", this.tableset.initJs);
          //初始化 表单 右边单元格属性
          this.initTableAttr();
          this.showCellAttr2 = true;
          this.version = res.info.id;
          this.cellStr = deepCopy(this.cellinfo);
        } else {
          this.message(res.msg, 3);
        }
      });
    },
    checkDataChange(e) {
      //根据选中版本  查询表单
      this.reportdetail();
    },
    clonesave() {
      //保存 表单属性  表单配置tableset
      this.setCellinfoField(); //保存 字段  信息
      //				this.cellinfo.content = JSON.stringify(this.tableset);
      let temptableset = this.delComAttr(deepCopy(this.tableset));
      this.cellinfo.content = JSON.stringify(temptableset);
      this.$set(this.cellinfo, "classId", this.cellid);
      reportsave(this.cellinfo).then((res) => {
        if (res.success) {
          this.cellinfo = res.info;
          this.version = res.info.id;
          this.getVersion();
          this.message("保存成功！", 1);
        } else {
          this.message(res.msg, 3);
        }
      });
    },
    clone() {
      //克隆表单

      this.$set(this.cellinfo, "id", null);
      this.cellinfo.table.forEach((table, index) => {
        this.$set(this.cellinfo.table[index], "id", null);
      });

      this.cellinfo.wf.forEach((wf, index) => {
        this.$set(this.cellinfo.wf[index], "id", null);
      });

      this.cellinfo.var.forEach((tvar, index) => {
        this.$set(this.cellinfo.var[index], "id", null);
      });

      this.cellinfo.field.forEach((field, index) => {
        this.$set(this.cellinfo.field[index], "id", null);
      });

      this.cellinfo.hField.forEach((hField, index) => {
        this.$set(this.cellinfo.hField[index], "id", null);
      });

      this.clonesave();
    },
    delCell() {
      //删除当前版本cell
      if (this.cellinfo.id) {
        this.messageBox("确定要删除当前表单！").then((res) => {
          if (res.action) {
            reportdelete({ id: this.cellinfo.id }).then((resD) => {
              if (resD.success) {
                this.getVersion();
                this.getRep(this.cellid);
                this.message(resD.msg, 1);
              } else {
                this.message(resD.msg, 3);
              }
            });
          }
        });
      } else {
        this.message("删除成功！", 1);
        this.getVersion();
        this.getRep(this.cellid);
      }
    },
    copyCell() {
      this.copytableset = this.tableset;
    },
    pasteCell() {
      this.messageBox("粘贴后老的表单就会丢失，确定粘贴？").then((res) => {
        if (this.copytableset) {
          this.tableset = this.copytableset;
          this.settablesize();
          for (let i = 0; i < this.tableset.trs.length; i++) {
            let tr = this.tableset.trs[i];
            for (let j = 0; j < tr.tds.length; j++) {
              let td = tr.tds[j];
              if (td.com) {
                if (td.com.comattrs.showType != 1) {
                  //不是标签的com都改成默认
                  td.com = this.deepCopy(com);
                }
              }
            }
          }
        }
      });
    },
    hasChange() {
      let res = false;
      if (this.cellStr) {
        res = !isEqual(this.cellStr, this.cellinfo);
        console.log(res)
        if (res == false) {
          res = !isEqual(this.tableset, JSON.parse(this.cellinfo.content)); //JSON.parse(JSON.stringify(this.tableset)  去掉__ob__: Observer 属性
        }
        console.log(res)
      }
      return res;
    },
    //			测试装载数据
    getRecord() {
      this.opratetype = "edit";

      this.messageInput("输表单id,记录id，例如: 65,52").then((v) => {
        if (v.value != "") {
          let arrs = v.value.split(",");
          this.wpId = arrs[0];
          this.tworkId = arrs[1];

          this.showCell = true;
        }
      });
    },
    delComAttr(temp) {
      //删除td 和 com 属性		压缩表单
      temp.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          for (let key in this.inittd) {
            if (this.inittd[key] == td[key]) {
              this.$delete(td, key);
            }
          }
          if (td.com) {
            if (td.com.comattrs) {
              if (
                td.com.comattrs.showType == 0 ||
                td.com.comattrs.showType == 2
              ) {
                this.$set(com.comstyles, "text-align", "left");
              } else {
                this.$set(com.comstyles, "text-align", "center");
              }
            }

            for (let key in com.comattrs) {
              if (com.comattrs[key] == td.com.comattrs[key]) {
                this.$delete(td.com.comattrs, key);
              }
            }
            if (JSON.stringify(td.com.comattrs) == "{}") {
              this.$delete(td.com, "comattrs");
            }
            for (let key in com.comevents) {
              if (com.comevents[key] == td.com.comevents[key]) {
                this.$delete(td.com.comevents, key);
              }
            }
            if (JSON.stringify(td.com.comevents) == "{}") {
              this.$delete(td.com, "comevents");
            }
            for (let key in com.comstyles) {
              if (com.comstyles[key] == td.com.comstyles[key]) {
                this.$delete(td.com.comstyles, key);
              }
            }
            if (JSON.stringify(td.com.comstyles) == "{}") {
              this.$delete(td.com, "comstyles");
            }
          }
        });
      });
      return temp;
    },
    addComAttr(temp) {
      console.log('获取content信息', temp);
      //添加td 和 com 属性
      temp.trs.forEach((tr, trindex) => {
        tr.tds.forEach((td, tdindex) => {
          for (let key in this.inittd) {
            if (td[key] == null) {
              this.$set(td, key, this.inittd[key]);
            }
          }
          if (td.com) {
            if (td.com.comattrs == null) {
              this.$set(td.com, "comattrs", {});
            }
            for (let key in com.comattrs) {
              if (td.com.comattrs[key] == null) {
                this.$set(td.com.comattrs, key, com.comattrs[key]);
              }
            }
            if (td.com.comattrs) {
              if (
                td.com.comattrs.showType == 0 ||
                td.com.comattrs.showType == 2
              ) {
                this.$set(com.comstyles, "text-align", "left");
              } else {
                this.$set(com.comstyles, "text-align", "center");
              }
            }
            if (td.com.comevents == null) {
              this.$set(td.com, "comevents", {});
            }
            for (let key in com.comevents) {
              if (td.com.comevents[key] == null) {
                this.$set(td.com.comevents, key, com.comattrs[key]);
              }
            }
            if (td.com.comstyles == null) {
              this.$set(td.com, "comstyles", {});
            }
            for (let key in com.comstyles) {
              if (td.com.comstyles[key] == null) {
                this.$set(td.com.comstyles, key, com.comstyles[key]);
              }
            }
          }
        });
      });
      return temp;
    },
    setDblEvent() {
      this.dialogVisible = true
      if (this.tdcom.comevents.selectType1 && this.tdcom.comevents.selectType1.length > 0) {
        setTimeout(() => {
          // this.$refs.codeMirrorIDERef.editorValue = this.autoEvents
          this.$refs.codeMirrorIDERef.editorValue = this.tdcom.comevents.selectType1
        }, 100);
      } else {
        this.$refs.codeMirrorIDERef.editorValue = ''
      }

      //设置双击事件
      // this.showWinCom = true;
    },
    closeWinCom() {
      this.showWinCom = false;
    },
    saveWinCom(info) {
      // 拿到对象，转换成字符串的形式进行渲染，渲染过后再进行字符串的解析
      // let a = Object.keys(info)
      // for(let i=0;i<a.length;a++){
      //   alert(123)
      // }
      let that = this
      this.autoEventIpt = ''
      this.$refs.codeMirrorIDERef.editorValue = ''
      console.log(info);
      this.autoEventIpt = JSON.stringify(info)
      setTimeout(() => {
        that.$refs.codeMirrorIDERef.insertCodemirror(`sys.rep.open(${this.autoEventIpt})`)
        //自动格式化代码
        this.codeFormatte();
      }, 100);
      // console.log(this.autoEventIpt);
      // console.log(JSON.parse(this.autoEventIpt));
      // this.autoEvents = JSON.stringify(info)
      // for (let key in info) {
      //   this.tdcom.comevents[key] = info[key];
      // }
      // console.log("this.tdcom.comevents", this.tdcom.comevents);
      this.showWinCom = false;
    },
    clearCom() {
      this.comf = this.deepCopy(comconfig);
      this.tdcom = this.deepCopy(com);
    },
    changeMicroId(id) {
      this.microId = id
    },
    // ceshi(){
    //   let sql = `let a = rep.getTableItem(1,2); console.log(a)`
    //   let sql1 = `rep.setTableItemAttr(2,2,'fieldName', 'GD_ID')`
    //   let sql2 = `let a = rep.setTableAll('id',666);
    //   console.log(a);`
    //   let sql3 = `let a = rep.getFieldName('TOUR_CYCLE');
    //   console.log(a);`
    //   let sql4 = `rep.setFieldName('ID','name',1)`
    //   let func = new Function('rep', sql4);
    //   func(this)
    // },
    getTableItem(i, j) {
      // console.log(this.tableset.trs[i-1].tds[j-1].com.comattrs);
      // console.log(this.cellinfo.table);// 可以动态添加表格，表格内为数组中对象，须动态写参数，添加完成后可用tableIdx添加名称
      return this.tableset.trs[i - 1].tds[j - 1].com.comattrs
    },
    setTableItemAttr(i, j, name, value) {
      if (name == 'tableIdx') {
        if (value >= this.cellinfo.table.length) {
          this.$message.error('请添加新数据表')
          return
        }
      }
      if (name == 'name') {
        this.$message.error('请直接配置字段名称')
        return
      }
      var num = []
      if (name == 'fieldName') {
        let option = this.comf.comattrs.find(item => {
          return item.attrkey == 'fieldName'
        })

        let Fnitem = option.optionitem.find((item, index) => {
          num.push(index)
          return item.label == value
        })
        if (!Fnitem) {
          this.$message.error('请输入已存在字段名称')
          return
        }
      }
      this.tableset.trs[i - 1].tds[j - 1].com.comattrs[name] = value
      this.tdcom.comattrs[name] = value
      // console.log(this.tdcom.comattrs.name);
      this.tdcom.comattrs.name = this.comf.comattrs[1].optionitem[num[num.length - 1]].value
      // console.log(this.comf.comattrs[1].optionitem[num[num.length - 1]].value);
    },
    setTableItemEvent(i, j, name, value) {
      this.tableset.trs[i - 1].tds[j - 1].com.comevents[name] = value
    },
    setTableItemStyle(i, j, name, value) {
      this.tableset.trs[i - 1].tds[j - 1].com.comstyles[name] = value
    },
    getTableAll() {
      return this.cellinfo
    },
    setTableAll(name, value) {
      if (name == 'id') {
        this.$message.error('禁止修改表id')
        return
      }
      this.cellinfo['name'] = value
    },
    getFieldName(fieldname, num) {
      this.getFieldNames = null
      this.getFieldNames = fieldname
      this.search()
      if (this.fieldPositionMap.length < 1) {
        this.$message.error('不存在该字段')
        return
      }
      if (this.fieldPositionMap.length == 1) {
        return this.getTableItem(this.fieldPositionMap[0].X, this.fieldPositionMap[0].Y)
      }
      if (this.fieldPositionMap.length > 1 && num) {
        this.$message.error('请选择第几个字段')
      } else if (num >= this.fieldPositionMap.length) {
        this.$message.error('选择字段超过现有字段')
      } else {
        return this.getTableItem(this.fieldPositionMap[num].X, this.fieldPositionMap[num].Y)
      }
    },
    setFieldName(fieldname, name, val, num) {
      this.getFieldName(fieldname, num)[name] = val
    },
    addBtn(code, name, diyScript) {
      this.cellinfo.button = []
      let btnItem = {
        code: code,
        name: name,
        wfNode: 999999,
        executeType: 0,
        params: diyScript
      }
      this.cellinfo.button.push(btnItem)
    },
    getBtn() {
      return this.cellinfo.button
    },
    delBtn(num) {
      this.cellinfo.button.splice(num)
    },
    delBtnAll() {
      this.cellinfo.button = []
    },
    aotuScript() {
      // this.autoEvents = this.$refs.codeMirrorIDERef.editorValue
      this.tdcom.comevents.selectType1 = this.$refs.codeMirrorIDERef.editorValue
      this.dialogVisible = false
      // alert(this.autoScript.indexOf('id'))
      // if(this.autoScript.indexOf('id') != -1 || this.autoScript.indexOf('ID') != -1 ){
      //   this.$message.error('禁止修改id')
      //   return
      // }
      // console.log(typeof(this.autoScript),this.autoScript);
      // let scp = `sys.rep.open('{"doubleEvent":"getUserDept","dblParamIn":null,"dblParamOut":null,"dblvue":"","dblcomId":-4,"dblcomText":"取用户部门","onlyOne":false,"type":0,"sql":null}')`

      // let scp = `
      // let demo={"doubleEvent":"selectDept","dblParamIn":"{\"userFlag\":\"false\",\"parentId\":\"0\"}","dblParamOut":null,"dblvue":"organizationTree.vue","dblcomId":-2,"dblcomText":"选部门","onlyOne":false,"type":0,"sql":null}
      // sys.rep.open('')`
      // console.log(this.autoEventIpt);
      let sys = { rep: this }
      // let func = new Function('sys', this.autoEvents);
      let func = new Function('sys', this.tdcom.comevents.selectType1);
      func(sys)

    },
    open(text) {
      // console.log(text)
      console.log(typeof text)
      if (text) {
        let JSobj = text;
        for (let key in JSobj) {
          this.tdcom.comevents[key] = JSobj[key];
        }
        console.log("this.tdcom.comevents", this.tdcom.comevents);
      }
    },
    copyTect(text) {
      var oInput = document.createElement('input');// 创建input
      oInput.value = text; // 把值赋值到input里
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$message({
        type: 'success',
        message: '复制成功'
      })

    },
    copyTect1(v) {
      this.copyTect(v)
    },
    codeFormatte() {
      this.$refs.codeMirrorIDERef.codeFormat();
    },
    writeScp(text) {
      if (text) {
        this.$refs.codeMirrorIDERef.insertCodemirror(text);
        this.codeFormatte();
      }
    }
  },
  mounted() {
    this.autocompleteHash = {};
    this.autocompleteHash["autoEvent"] = this.comf.comevents.find(
      (a) => a.attrkey == "autoEvent"
    ).optionitem;
    this.autocompleteHash["name"] = this.comf.comattrs.find(
      (a) => a.attrkey == "name"
    ).optionitem;
  },
  created: function () {
    this.tdcom = this.deepCopy(com);
    this.comf = this.deepCopy(comconfig);
    this.globalClick();
  },
};
</script>

<style scoped>
.coordinates {
  widows: 200px;
  margin-left: 15px;
}

.sys-cell {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--system-page-content-bgc);
  border: 1px solid var(--system-page-content-border-color);
}

.cell-header {
  height: 34px;
  line-height: 34px;
  width: 100%;
  display: flex;
  padding: 0 10px;
  border-bottom: var(--cell-tool-line);
}

.cell-btn {
  height: 34px;
  line-height: 34px;
  width: 30px;
  font-size: 18px;
}

.divsplit {
  width: 1px;
  height: 26px;
  margin-top: 4px;
  border-right: 1px solid rgba(215, 215, 215, 1);
}

.cellcenter {
  height: calc(100% - 34px);
  width: 100%;
  display: flex;
}

.cellcontent {
  height: 100%;
  width: calc(100% - 260px);
  padding: 10px;
  overflow-x: auto;
  overflow-y: auto;
  margin-right: 10px;
}

.cellatrrs {
  /*margin-right: 10px;*/
}

.cell-attr {
  height: 100%;
  width: 260px;
  max-width: 260px;
  background: var(--system-page-content-bgc);
  padding-left: 10px;
  border-left: var(--cell-line);
}

/*设计表 样式*/

.designtable {
  tablelayout: fixed;
  bordercollapse: collapse;
  wordbreak: breakAll;
  border-collapse: collapse;
  border-spacing: 0px;
}

.tdcell {
  border: 1px solid rgba(220, 226, 230, 1);
  box-sizing: content-box;
  /*box-shadow:0px 1px 0px 0px rgba(220,226,230,1),1px 0px 0px 0px rgba(220,226,230,1);*/
}

.tdcell1 {
  background: red !important;
}

.rowline {
  height: 15px;
  position: absolute;
  z-index: 2;
}

.colline {
  left: 170px;
  top: 120px;
  width: 15px;
  position: absolute;
  z-index: 2;
}

.rowresize {
  cursor: s-resize;
}

.colresize {
  cursor: w-resize;
}

/*右侧属性栏样式*/

.cell-attr {
  width: 100%;
  height: 100%;
}

.cell-attr .el-tabs {
  height: 100%;
}

.cell-attr .el-tabs--border-card {
  border: none;
}

.cell-attr>>>.el-tabs__active-bar {
  height: 3px;
  width: 60px !important;
  left: -13px;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 13px;
}

/*tabs 内容高度，超出滚动*/
>>>.el-tabs__content {
  height: calc(100% - 55px);
}

/*tabs pane 继承高度,超出滚动*/
>>>.el-tab-pane {
  overflow: auto;
  height: 100%;
  padding-right: 10px;
}

>>>.el-tabs__item {
  padding: 0 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--disable-text-color);
}

/*活动颜色*/

>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/

>>>.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tab-line-color);
}

.row {
  display: flex;
  line-height: 32px;
  margin-bottom: 10px;
}

.row-name {
  width: 70px;
  min-width: 70px;
  text-align: left;
  color: var(--system-form-text-color);
}

/*设置 element 输入框 下拉框的高度*/

.row>>>.el-input__inner {
  line-height: 32px;
  height: 32px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  background: var(--page-menu-input-back-color);
}

.row>>>.el-input .el-select__caret {
  line-height: 32px;
}

/*element 输入框的叉叉按钮 居中*/

.row>>>.el-input__icon {
  line-height: 32px;
}

.slider {
  width: 162px;
}

.row>>>.el-color-picker__trigger {
  height: 32px;
  width: 167px;
}

.switch {
  display: flex;
  flex-wrap: wrap;
}

.switchbox {
  width: 112px;
  height: 32px;
  display: flex;
}

.el-switch {}

/*版本下拉框高度设定*/
.flow-version>>>.el-input__inner {
  height: 24px !important;
  line-height: 24px !important;
  width: 100%;
  background: var(--page-menu-input-back-color);
}

>>>.el-select {
  line-height: 32px;
}

.flow-version>>>.el-input__icon {
  height: 32px !important;
  line-height: 32px !important;
}

.flow-version span {
  height: 32px;
  line-height: 32px;
  width: 80px;
  text-align: right;
  margin-right: 13px;
  color: var(--system-form-text-color);
}
</style>

<style scoped lang="scss">
.wfDialog {
  position: absolute;
  width: 270px;
  height: 320px;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.75);
  padding: 0 12px;
  padding-top: 12px;

  .el-radio-group {
    width: 100%;
    text-align: left;

    .el-radio {
      margin-right: 8px;
    }
  }

  .wfMapStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 14px;

    .wfName {
      display: inline-block;
      width: 100%;
      border-bottom: 1px solid #ccc;
      text-align: left;
      padding: 6px 0;
      color: rgb(153, 153, 153);
    }

    .el-checkbox ::v-deep .el-checkbox__label {
      font-size: 14px;
    }
  }
}

.codeHeaderBtn {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>
